<template>
  <div>
    <el-card>
      <h3>添加试卷</h3>
      <el-form ref="ruleForm" :model="tiarr" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="试卷名称" prop="sjname">
          <el-input v-model="sjname" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item v-for="(item,index) of tiarr" :key="index" label="题目" prop="title">
          <el-input v-model="item.title" type="text" autocomplete="off" />
          <el-select v-model="item.score" placeholder="请选择分数">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="add">添加一题</el-button> -->
          <el-button type="success" class="el-icon-bottom" @click="add">添加题目</el-button>
          <el-button type="danger" class="el-icon-top" @click="del">删除题目</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button type="primary" @click="fan">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      sjname: '',
      tiarr: [
        {
          title: '',
          score: '',
          answer: '',
          defen: ''
        },
        {
          title: '',
          score: '',
          answer: '',
          defen: ''
        }
      ],
      options: [{
        value: 3,
        label: '3'
      }, {
        value: 5,
        label: '5'
      }, {
        value: 10,
        label: '10'
      }, {
        value: 15,
        label: '15'
      }, {
        value: 20,
        label: '20'
      }]
      // rules: {
      //     sjname: [
      //     { required: true, message: '请输入试卷名称', trigger: 'blur' },
      //     ],
      //     title: [
      //     { required: true, message: '请输入题目内容及分数', trigger: 'blur' },
      //     ],
      // },
    }
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.$route.query)
  },
  mounted() {},
  methods: {
    add() {
      this.tiarr.push({ title: '', score: '', answer: '' })
    },
    async submitForm() {
      //   this.$refs.ruleForm.validate(async (valid) => {
      //       if(valid){
      var total = 0
      this.tiarr.forEach(element => {
        total += element.score
      })
      var res = await this.http.post('/test/test/', {
        name: 'admin',
        sjname: this.sjname,
        question: this.tiarr,
        tscore: total
      })
      if (res.data.code == 200) {
        this.$message.success('添加试卷成功')
        this.$router.push('/kaoshi')
      }
      //       }
      //   })
    },
    del() {
      this.tiarr.pop()
    },
    fan() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
    .el-form{
        margin-top: 15px;
    }
    .el-form .el-input{
        width: 600px;
    }
    .el-form .el-select{
        margin-left: 10px;
        width: 120px;
    }
</style>
